<template>
  <el-dialog :title="`${type === 1 ? '入库记录' : '出库记录'}`" :visible.sync="dialogVisible" width="90%" @close="handleClose">
    <el-button type="primary" size="small" icon="el-icon-plus" @click="openDialogHandle(true, null)">
      添加
    </el-button>
    <el-table :data="tableData" border :max-height="400" style="margin-top: 10px">
      <el-table-column label="序号" width="50px" type="index"></el-table-column>
      <el-table-column :label="type == 1 ? `进场时间` : '出场时间'" show-overflow-tooltip prop="enterTime" width="170px"
        align="center"></el-table-column>
      <el-table-column :label="type == 1 ? `进场单号` : '出场单号'" show-overflow-tooltip width="170" prop="code"
        align="center"></el-table-column>
      <el-table-column show-overflow-tooltip label="物料编码" prop="materialCode" width="170px"></el-table-column>
      <el-table-column show-overflow-tooltip label="物料类型" prop="materialTypeName" width="100px"></el-table-column>
      <el-table-column show-overflow-tooltip label="规格型号" prop="spec" width="100px"></el-table-column>
      <el-table-column show-overflow-tooltip label="计量单位" prop="unitName" width="100px"></el-table-column>
      <el-table-column label="生产厂家" show-overflow-tooltip width="170px" prop="issueUnitName"
        align="center"></el-table-column>
      <el-table-column label="生产批号" show-overflow-tooltip width="100" prop="batchNumber"
        align="center"></el-table-column>
      <el-table-column label="数量" prop="actualCount" width="100" align="center"></el-table-column>
      <el-table-column label="用途" show-overflow-tooltip width="100" prop="materialUsage"
        align="center"></el-table-column>
      <el-table-column label="备注" show-overflow-tooltip min-width="100" prop="remark" align="center"></el-table-column>
      <el-table-column label="操作" width="100px" align="center" prop="edit" fixed="right">
        <template slot-scope="scope">
          <el-link v-if="type == 1" type="primary" @click="openDialogHandle(false, scope.row)"
            :underline="false">编辑</el-link>
          <el-link type="primary" @click="handleDelete(scope.row)" :underline="false">删除</el-link>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination background :page-size="pageVO.pageSize" :current-page.sync="pageVO.pageNo" :total="pageVO.total"
        layout="total, sizes, prev, pager, next, jumper" :page-sizes="[10, 20, 30, 50, 100]"
        @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      <AddEidt ref="addEditRef" @submit="getTableData"></AddEidt>
      <AddOutEidt ref="addOutEditRef" @submit="getTableData"></AddOutEidt>
    </div>
  </el-dialog>
</template>
<script>
import { getInventoryNewList, getOutNewList } from "@/api/inventory";
import { deleteLog } from "@/api/materialEnter";
import AddEidt from "./eidt.vue";
import AddOutEidt from "./edits.vue";

export default {
  components: { AddEidt,AddOutEidt },
  data() {
    return {
      type: 1,
      row: null,
      tableData: [],
      total: 0,
      titlePrefix: "",
      pageVO: {
        pageNo: 1,
        pageSize: 10,
      },
      eidtVisable: false,
      dialogVisible: false,
    };
  },
  methods: {
    handleClose() {
      this.dialogVisible = false;
      this.tableData = [];
      this.pageVO = {
        pageNo: 1,
        pageSize: 10,
      };
    },
    openHandle(type, row) {
      this.type = type;
      this.row = row;
      this.dialogVisible = true;
      this.getTableData();
    },
    handleSizeChange(size) {
      this.pageVO.pageNo = 1;
      this.pageVO.pageSize = size;
      this.getTableData();
    },
    handleCurrentChange(num) {
      this.pageVO.pageNo = num;
      this.getTableData();
    },
    openDialogHandle(boo, row) {
      if(this.type==1){
        this.$refs.addEditRef.openHandle({
          parent: JSON.parse(JSON.stringify(this.row)),
          type: this.type,
          editForm: JSON.parse(JSON.stringify(row)),
          add: boo,
        });
      }else{
        this.$refs.addOutEditRef.openHandle({
          parent: JSON.parse(JSON.stringify(this.row)),
          type: this.type,
          editForm: JSON.parse(JSON.stringify(row)),
          add: boo,
        });
      }
      
    },
    getTableData() {
      let method = getInventoryNewList
      if (this.type == 2) {
        method = getOutNewList
      }
      method({
        materialCode: this.row.materialCode,
        type: this.type,
        ...this.pageVO,
      }).then((res) => {
        const { data, total } = res.data || {};
        this.tableData = data || [];
        this.pageVO.total = total;
      });
    },

    handleDelete(row) {
      this.$confirm('是否确认删除进场编号为"' + row.materialCode + '"的数据项?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(function () {
          return deleteLog({ id: row.id });
        })
        .then(() => {
          this.getTableData();
          this.$message.success('删除成功');
        });
    },
  },
};
</script>
<style lang="scss" scoped>
.pagination {
  text-align: right;
  padding: 10px 0;
}

.el-table th.el-table__cell {
  background-color: #f2f2f2;
}
</style>
